<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{
      border: solid 1px black;
    }
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs");

  cvs.width = 400;
  cvs.height = 400;

  const ctx = cvs.getContext("2d");

  const x=50,y=50,w=100,h=100;
  // ctx.fillRect(x, y, w, h);
  ctx.rect(x,y,w,h);


  // canvas的画笔没有事件系统
  // canvas元素有DOM事件
  // 利用坐标计算，判断是否点击到的指定图形

  const ax=250,ay=250,ar=50;
  ctx.arc(ax, ay, ar, 0, 2*Math.PI);

  ctx.fill();


  cvs.onmousemove = function(eve){
    const e = eve || window.event;
    // // 矩形
    // if(e.offsetX > x && e.offsetX < x+w && e.offsetY > y && e.offsetY < y+h){
    //   console.log("进入到矩形了");
    // }

    // // 圆形
    // const a = ax - e.offsetX;
    // const b = ay - e.offsetY;
    // const c = Math.sqrt(a*a + b*b);
    // if(c < ar){
    //   console.log("进入到圆形了");
    // }

    // 判断指定的点，是否在一个闭合的路径内
    console.log( ctx.isPointInPath( e.offsetX, e.offsetY ) );
  }

  // 异形：
    // 无交叉：形1 || 形2
    // 有交叉：形1 && 形2

  

  

</script>
</html>